
import React, { Component } from 'react';
import ToolTip from 'bee-tooltip';
import {toThousands, ts2Formatter} from 'utils';

class RenderCell extends Component {
    constructor(props){
        super(props)
        this.state={
            visible:true,
            enter:false
        }
    }

    click=()=>{
        if(this.state.visible){
            setTimeout(() => {
                let input = document.querySelector('.triangle-flag .u-form-control');
                if(input)input.focus()
            }, 0);
        }
        this.setState({
            visible:!this.state.visible
        })
    }

    onMouseEnter=()=>{
        this.setState({
            enter:true
        })
    }

    onMouseLeave=()=>{
        this.setState({
            visible:true,
            enter:false
        })
    }

    getValue=(value,item,record,index)=>{
        let { renderType } = item;
        if(typeof item.oldRender =='function') {
            return item.oldRender(value,record,index)
        }

        if(renderType&&(renderType=='select' || renderType=='selectradio')){
            item.filedProps.options && item.filedProps.options.forEach(item => {
                if(item.code===value){
                    value = item.name
                }
            });
        }else if(renderType&&(renderType=='inputnumber') && (value || value===0)){
            value = toThousands(value,item.filedProps && item.filedProps.precision);
        }else if(renderType&&(renderType=='datepicker') && value) {
            value = ts2Formatter(value,item.filedProps.formatType);
        }
        return value;
    }

    renderSpan=()=>{
        let {record,itemProps,index} = this.props;
        if(record.editFlagObj && typeof record.editFlagObj[itemProps.dataIndex] !== 'boolean') {
            record.editFlagObj[itemProps.dataIndex] = record.editFlagObj.other;
        }
        if(record.editFlagObj && !record.editFlagObj[itemProps.dataIndex]){
            // let textAlign = this.props.textAlign;
            // let placement = 'left';
            // if(textAlign)placement=textAlign=='center'?'bottom':textAlign;
            // return (
            //     <ToolTip inverse overlay={this.props.text} placement={placement}>
            //         <span className={`ac-grid-cell ${this.state.enter?'enter':''}`} 
            //         onClick={this.click}
            //         >{this.props.text}</span>
            //     </ToolTip> 
            // )
            let textAlign = this.props.textAlign;
            let placement = 'left';
            if(textAlign)placement=textAlign=='center'?'bottom':textAlign;
            let value = this.props.text || itemProps.defaultValue || "";
            value = this.getValue(this.props.text,itemProps,record,index);
            // if(item.textAlign)placement=item.textAlign=='center'?'bottom':item.textAlign;
            return <ToolTip overlay={value} inverse placement={placement}>
                        <span className='ac-grid-cell'>{value}</span>
                    </ToolTip>
        }else{
            return React.cloneElement(this.props.children,{
                onBlur:()=>{
                    this.setState({
                        visible:true,
                        enter:false
                    })
                }
            })
        }
    }

    render() {
        return this.renderSpan();
    }
}
export default RenderCell;
